<%@tag description="descricao" pageEncoding="ISO-8859-1"%>

<%@ taglib uri="/WEB-INF/struts-html" prefix="html" %>
<%@ taglib uri="/WEB-INF/struts-tiles" prefix="tiles" %>
<%@ taglib uri="/WEB-INF/struts-logic" prefix="logic" %>
<%@ taglib uri="/WEB-INF/struts-bean" prefix="bean" %>
<%@ taglib uri="/WEB-INF/c" prefix="c" %> 
<%@ taglib uri="/tags/el" prefix="el" %>

<%@ attribute name="id" required="true" %>
<%@ attribute name="titulo" required="true" %>
<%@ attribute name="width" required="true" %>
<%@ attribute name="height" required="true" %>
<%@ attribute name="parentID" required="false" %>

<!-- Poupup Begin -->
<table id='${id}' class='poupup-table' style='position:absolute;  display:none; width:${width};height:${height}};'>
    <tr valign='top' height='1%'>
        <td id='${id}_title'class='poupup-title'>${titulo}</td>
      
        <td width='1%'>
            <img src='${contexto}/pages/images/fechar.jpg' onclick='document.getElementById("${id}").close();'/>
        </td>
    </tr>
    <tr>
        <td colspan='2' valign='top' class='poupup-body'>
            <jsp:doBody/>
        </td>
    </tr>
</table>

<script> 
    var div = document.getElementById("${id}");
    
    div.close= function(){
        document.getElementById("${id}").style.display='none';
    }
    
    div.openXY= function(left, top){        
        var win = document.getElementById("${id}");
        if(left) win.style.left=left;
        if(top) win.style.top = top;  
        win.style.display='';
    }
    
    div.open= function(){
        if(''!='${parentID}'){
           var reg = getRegion(document.getElementById('${parentID}'));            
	           this.openXY( reg.left- ${width} , reg.top - ${height} );  

        }else{  
            this.openXY();
        }
    
    
    }
    
   
function getXY(el) {

      // has to be part of document to have pageXY
      if (el.parentNode === null || el.style.display == 'none') {
         return false;
      }

      /**
       * Position of the html element (x, y)
       * @private
       * @type Array
       */
      var parent = null;
      var pos = [];
      var box;

      if (el.getBoundingClientRect) { // IE
         box = el.getBoundingClientRect();
         var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
         var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
         return [(box.left + scrollLeft), (box.top + scrollTop)];
      }
      else if (document.getBoxObjectFor) { // gecko
         box = document.getBoxObjectFor(el);
         pos = [box.x, box.y];
      }
      else { // safari/opera
         pos = [el.offsetLeft, el.offsetTop];
         parent = el.offsetParent;
         if (parent != el) {
            while (parent) {
               pos[0] += parent.offsetLeft;
               pos[1] += parent.offsetTop;
               parent = parent.offsetParent;
            }
         }

         // opera & (safari absolute) incorrectly account for body offsetTop
         var ua = navigator.userAgent.toLowerCase();
         if (
            ua.indexOf('opera') != -1
            || ( ua.indexOf('safari') != -1 && this.getStyle(el, 'position') == 'absolute' )
         ) {
            pos[1] -= document.body.offsetTop;
         }
      }

      if (el.parentNode) { parent = el.parentNode; }
      else { parent = null; }

      while (parent && parent.tagName != 'BODY' && parent.tagName != 'HTML') {
         pos[0] -= parent.scrollLeft;
         pos[1] -= parent.scrollTop;

         if (parent.parentNode) { parent = parent.parentNode; }
         else { parent = null; }
      }

      return pos;
   };

    function calculaRetas(i1,f1,i2,f2){        
        if(f2>=f1){
            var ponto={}            
            if (f1>=i2){
                if (i1 > i2){                    
                    ponto.x1=i1;
                    ponto.x2=f1;
                    return ponto;
                }else{
                    ponto.x1=i2;
                    ponto.x2=f1;
                    return ponto;
                }                    
            }else{
                ponto.x1=0;
                ponto.x2=0;
                return ponto;
            }              
            
        }else{
            return calculaRetas(i2,f2,i1,f1);
        }
    }


function createRegion(top,botton,left,right){
    var regiao={};
    
    regiao.top = top;
    regiao.right = right;
    regiao.botton = botton;
    regiao.left = left;
        
    regiao.getWidth =  function(){
        return this.right - this.left;
    }
    regiao.getHeight = function(){
        return this.botton - this.top;
    }
    regiao.toString = function(){
        return 'X('+this.left+','+this.right+'); Y('+this.top+','+this.botton+')';
    }
        
    regiao.intercept= function(regiao){        
        var width= calculaRetas(this.left, this.right, regiao.left, regiao.right);
        var height= calculaRetas(this.top, this.botton, regiao.top, regiao.botton);
        return createRegion(height.x1,height.x2,width.x1,width.x2);
    }
    
    regiao.clone = function(){
        return createRegion(this.top,this.botton, this.left, this.right);
    }
    
    return regiao;    
}

function getRegion(el) {
    var regiao = {}    
    var p = getXY(el);
    return createRegion(p[1],p[1] + el.offsetHeight,p[0] , p[0] + el.offsetWidth );
};
    
</script>
<!-- Poupup End -->